import React, { Component } from 'react';
import styles from './index.module.scss'
import classNames from 'classnames'
// 所有房屋配置项
const HOUSE_PACKAGE = [
    {
        id: 1,
        name: "衣柜",
        icon: "icon-wardrobe"
    },
    {
        id: 2,
        name: "洗衣机",
        icon: "icon-wash"
    },
    {
        id: 3,
        name: "空调",
        icon: "icon-air"
    },
    {
        id: 4,
        name: "天然气",
        icon: "icon-gas"
    },
    {
        id: 5,
        name: "冰箱",
        icon: "icon-ref"
    },
    {
        id: 6,
        name: "暖气",
        icon: "icon-Heat"
    },
    {
        id: 7,
        name: "电视",
        icon: "icon-vid"
    },
    {
        id: 8,
        name: "热水器",
        icon: "icon-heater"
    },
    {
        id: 9,
        name: "宽带",
        icon: "icon-broadband"
    },
    {
        id: 10,
        name: "沙发",
        icon: "icon-sofa"
    }
];
class HouseMatch extends Component {
    // 默认 只读
    static defaultProps = {
        readonly: true
    }
    constructor(props) {
        super()
        let tempArray = []
        if (props.data) {
            tempArray = HOUSE_PACKAGE.filter(item => props.data.includes(item.name))
        } else {
            tempArray = HOUSE_PACKAGE
        }
        this.state = {
            list: tempArray,
            // 选中的值
            selectValues: [],
        }
    }
    // 切换选中状态
    toggleSelect = name => {
        if (this.props.readonly) return
        let oldSelectValues = this.state.selectValues
        // 数组中存在这个内容, 就过滤掉
        if (oldSelectValues.includes(name)) {
            // 过滤之后替换
            oldSelectValues = oldSelectValues.filter(item=>item!==name)
        } else {//不存在 就添加
            oldSelectValues.push(name)
        }
        this.setState({
            selectValues: oldSelectValues
        },() => {
            this.props.onHouseMatchChange && this.props.onHouseMatchChange(this.state.selectValues.join("|"))
        })
    }
    render() {
        return (
            <ul className={styles.root}>
                {this.state.list.map(item => {
                    return <li className={classNames(styles.item,{[styles.active]:this.state.selectValues.includes(item.name)})} key={item.id} onClick={() => { this.toggleSelect(item.name) }}>
                        <p>
                            <i className={classNames(`iconfont ${item.icon}`, styles.icon)}></i>
                        </p>
                        {item.name}
                    </li>
                })}
            </ul>
        );
    }
}

export default HouseMatch;